<template>
  <!-- 搜索结果 -->
  <div class="searchList">
    <Loading size="50" v-if="searchList.length === 0" />
    <template v-else>
      <div class="searchItem" v-for="item,index in searchList" :key="index" @click="goRead(item)">
      <div class="index">{{index+1}}</div>
      <div class="info">
        <div class="title ellipsis">{{item.name}}</div>
        <div class="author ellipsis">{{item.author}}</div>
        <div class="lastChapter ellipsis">{{item.lastChapter}}</div>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SearchList',
  computed: {
    ...mapState({
      searchList: (state) => state.novel.searchList

    })
  },
  methods: {
    goRead ({ bookUrl, bookSourceUrl, name }){
      const query = { source: bookSourceUrl + bookUrl }
      this.$router.push({
        path: '/read',
        query
      })
      this.$store.commit('SEARCHNAME', name)
    }
  }
}
</script>

<style lang="less" scoped>
.searchList{
      position: fixed;
      left: 0;
      right: 0;
      top: 150px;
      overflow: auto;
      height: calc( 100vh - 150px);
      .Loading{
        display: flex;
        justify-content: center;
        height: 40vh;
        align-items: center;

      }
      .searchItem{
        display: flex;
        margin: 1em auto;
        background-color: var(--box-bg);
        color: var(--font-color);
        width: 90%;
        border-radius: .5em;
        .index{
          font-size: 2em;
          font-weight: 700;
          width: 6rem;
          height: 6rem;
          text-align: center;
          line-height: 3em;
        }
        .info{
          width: calc(100% - 6em);
          height: 6rem;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .title{
            font-size: 1.2em;
          }
          .lastChapter{
            font-size: .8em;
          }
          .author{
            font-size: .7em;
          }
        }
      }
    }
</style>
